import React, { Component } from 'react'
import { Dimensions, FlatList, Image, Text, View } from 'react-native'

const {width,height}=Dimensions.get('screen');
const rpx=x=>(width/750)*x;

export default class App extends Component {
  state={result:[]};

  componentDidMount(){
    const url='https://api.apiopen.top/getWangYiNews?page=1';
    fetch(url).then(res=>res.json()).then(res=>{
      console.log(res);

      this.setState({result:res.result});
    })
  }
  render() {
    /**
     * 3个核心属性
     * data：数据项
     * keyExtractor:每项UI对应的唯一标识
     * renderItem：每个数据对应的UI
     */
    return <FlatList 
              data={this.state.result}
              keyExtractor={(Item,index)=>index+''}
              renderItem={this._renderItem}
              numColumns={2}//列数，默认1列
            />
  }

_renderItem=({item})=>{
  const space=rpx(10);
  const box_w=(rpx(750)-3*space)/2;
  return(
    <View style={{width:box_w,marginLeft:space,marginTop:space}}>
      <Image source={{uri:item.image}} style={{width:'100%',height:150}}/>
      <View>
        <Text style={{fontSize:rpx(30)}} numberOfLines={2}>{item.title}</Text>
         <Text style={{fontSize:rpx(25),color:'gray'}}>{item.passtime}</Text>
      </View>
     
    </View>
  )
  
  }
}